<template>
  <el-tooltip v-if="fullSatus" class="box-item" effect="dark" content="全屏" placement="bottom">
    <el-button type="primary" icon="FullScreen" circle @click="fullScreen" />
  </el-tooltip>
  <el-tooltip v-else class="box-item" effect="dark" content="退出全屏" placement="bottom">
    <el-button type="primary" circle @click="fullScreen">
      <SvgIcon name="tuichu" color="pink" width="15px" height="10px"></SvgIcon>
    </el-button>
  </el-tooltip>
</template>

<script lang="ts" setup>
import { ref } from "vue";
let fullSatus = ref(true);
function fullScreen() {
  // DOM对象的一个属性，可以用来判断当前项目是不是全屏模式，全屏返回true，不是全屏null
  let full = document.fullscreenElement;
  // 切换全屏(不同浏览器存在兼容问题)
  if (!full) {
    document.documentElement.requestFullscreen();
    fullSatus.value = false;
  } else {
    document.exitFullscreen();
    fullSatus.value = true;
  }
}
</script>
<style lang="scss" scoped></style>